<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件批量处理工具使用手册</title>
    <style>
        /* 基础样式 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            max-width: 900px;
            margin: 0 auto;
            padding: 20px;
            color: #333;
            background-color: #fff;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            body {
                padding: 15px;
                font-size: 14px;
            }
        }

        /* 标题样式优化 */
        h1 {
            text-align: center;
            color: #2c3e50;
            border-bottom: 2px solid #eee;
            padding-bottom: 10px;
            margin-bottom: 30px;
        }

        h2 {
            color: #2c3e50;
            margin-top: 40px;
            padding-bottom: 8px;
            border-bottom: 1px solid #eee;
            position: relative;
        }

        h2::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 100px;
            height: 2px;
            background-color: #3498db;
        }

        h3 {
            color: #34495e;
            margin-top: 25px;
        }

        /* 列表样式优化 */
        ul, ol {
            padding-left: 25px;
        }

        li {
            margin: 8px 0;
            line-height: 1.8;
        }

        /* 目录样式优化 */
        .toc {
            background-color: #f8f9fa;
            padding: 25px;
            border-radius: 8px;
            margin: 30px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .toc h2 {
            margin-top: 0;
            border-bottom: none;
        }

        .toc h2::after {
            display: none;
        }

        .toc ul {
            list-style-type: none;
            padding-left: 15px;
        }

        .toc a {
            color: #2c3e50;
            text-decoration: none;
            transition: color 0.3s;
        }

        .toc a:hover {
            color: #3498db;
        }

        /* 提示框样式优化 */
        .note, .warning, .tip {
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            position: relative;
        }

        .note {
            background-color: #f8f9fa;
            border-left: 4px solid #3498db;
        }

        .warning {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
        }

        .tip {
            background-color: #d4edda;
            border-left: 4px solid #28a745;
        }

        /* 代码块样式 */
        code {
            background-color: #f7f7f7;
            padding: 2px 5px;
            border-radius: 3px;
            font-family: Consolas, Monaco, 'Andale Mono', monospace;
            font-size: 0.9em;
        }

        /* 打印样式 */
        @media print {
            body {
                max-width: none;
                padding: 0;
                background: white;
            }

            .toc {
                box-shadow: none;
                border: 1px solid #ddd;
            }

            a {
                text-decoration: none;
                color: #333;
            }

            .note, .warning, .tip {
                border: 1px solid #ddd;
                break-inside: avoid;
            }
        }

        /* 返回顶部按钮 */
        .back-to-top {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #3498db;
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            text-align: center;
            line-height: 40px;
            cursor: pointer;
            display: none;
            transition: opacity 0.3s;
            opacity: 0.7;
        }

        .back-to-top:hover {
            opacity: 1;
        }

        /* 段落样式 */
        p {
            margin: 15px 0;
            line-height: 1.8;
        }

        /* 强调文本样式 */
        strong {
            color: #2c3e50;
            font-weight: 600;
        }

        /* 图片样式 */
        img {
            max-width: 100%;
            height: auto;
            border-radius: 4px;
            margin: 15px 0;
        }
    </style>
</head>
<body>
    <h1>文件批量处理工具使用手册</h1>

    <div class="toc">
        <h2>目录</h2>
        <ul>
            <li><a href="#工具简介">工具简介</a></li>
            <li><a href="#功能特点">功能特点</a></li>
            <li><a href="#使用说明">使用说明</a>
                <ul>
                    <li><a href="#excel内容替换">Excel内容替换</a></li>
                    <li><a href="#word内容替换">Word内容替换</a></li>
                    <li><a href="#文件批量重命名">文件批量重命名</a></li>
                </ul>
            </li>
            <li><a href="#注意事项">注意事项</a></li>
            <li><a href="#常见问题">常见问题</a></li>
        </ul>
    </div>

    <h2 id="工具简介">工具简介</h2>
    <p>文件批量处理工具是一个基于Web的多功能文件处理工具，支持Excel文件内容替换、Word文件内容替换以及文件批量重命名等功能。工具界面简洁直观，操作便捷，适合需要批量处理文件的用户使用。</p>

    <h2 id="功能特点">功能特点</h2>
    <ol>
        <li><strong>多种处理模式</strong>
            <ul>
                <li>Excel文件内容批量替换</li>
                <li>Word文件内容批量替换</li>
                <li>文件批量重命名</li>
            </ul>
        </li>
        <li><strong>灵活的文件支持</strong>
            <ul>
                <li>支持单个或多个文件处理</li>
                <li>支持ZIP压缩包中的文件处理</li>
                <li>支持.xlsx、.xls、.docx等格式</li>
            </ul>
        </li>
        <li><strong>丰富的重命名规则</strong>
            <ul>
                <li>自定义替换</li>
                <li>添加前缀/后缀</li>
                <li>序号重命名</li>
                <li>正则表达式重命名</li>
            </ul>
        </li>
    </ol>

    <h2 id="使用说明">使用说明</h2>

    <h3 id="excel内容替换">Excel内容替换</h3>
    <ol>
        <li><strong>选择功能</strong>
            <ul>
                <li>点击顶部"Excel内容替换"选项</li>
            </ul>
        </li>
        <li><strong>文件选择</strong>
            <ul>
                <li>选择文件类型（Excel文件或ZIP文件）</li>
                <li>点击选择文件按钮上传文件</li>
                <li>支持多个Excel文件同时处理</li>
            </ul>
        </li>
        <li><strong>设置替换参数</strong>
            <ul>
                <li>输入查找文本</li>
                <li>输入替换文本</li>
                <li>选择匹配模式（模糊/精确）</li>
                <li>选择替换模式（全部/首个）</li>
            </ul>
        </li>
        <li><strong>执行替换</strong>
            <ul>
                <li>点击"开始替换"按钮</li>
                <li>等待处理完成</li>
                <li>自动下载处理后的文件</li>
            </ul>
        </li>
    </ol>

    <!-- 其余部分的HTML代码类似，按照相同的结构继续转换... -->
    
    <div class="note">
        <h2 id="使用建议">使用建议</h2>
        <ol>
            <li>首次使用建议先用少量文件测试</li>
            <li>重要文件处理前请做好备份</li>
            <li>大量文件处理时请耐心等待</li>
            <li>定期清理浏览器缓存以确保工具正常运行</li>
        </ol>
    </div>

    <div class="warning">
        <h2 id="技术支持">技术支持</h2>
        <p>如遇到使用问题，请检查：</p>
        <ol>
            <li>浏览器版本是否最新</li>
            <li>网络连接是否正常</li>
            <li>文件格式是否符合要求</li>
        </ol>
        <p>如问题持续，请联系技术支持。</p>
    </div>

    <!-- 添加返回顶部按钮 -->
    <div class="back-to-top" id="backToTop">↑</div>

    <script>
        // 返回顶部功能
        const backToTop = document.getElementById('backToTop');
        
        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTop.style.display = 'block';
            } else {
                backToTop.style.display = 'none';
            }
        });

        backToTop.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 目录点击平滑滚动
        document.querySelectorAll('.toc a').forEach(anchor => {
            anchor.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href');
                const targetElement = document.querySelector(targetId);
                targetElement.scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html> 